import { Button, Popconfirm, Space, Table, Image, Tag, Select, Input } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { FC, useEffect, useState } from 'react';
import { getCategoryHandler, getProListHandler, getProSearchHandler } from '@/api/pro'
import '@/views/pro/css/ProList.css'
interface ProListProps { }
interface DataType {
  brand: string
  category: string
  desc: string
  discount: string
  img1: string
  originprice: string
  proname: string
  issale: number
  proid: string,
  stock: number
  isrecommend: string
  isseckill: string
}
const ProSearch: FC<ProListProps> = () => {
  const height = document.body.clientHeight
  const [data, setData] = useState([])
  const [total, setTotal] = useState(0)
  const [count, setCount] = useState(1)
  const [limitNum, setLimitNum] = useState(10)
  const [Category, setCategory] = useState<string[]>([])
  const [cateSelect, setCateSelect] = useState('')
  const [Search, setSearch] = useState('')
  useEffect(() => {
    getProListHandler({ count, limitNum }).then(res => {
      setData(res.data.data)
      setTotal(res.data.total)
    })
    getCategoryHandler().then(res => {
      setCategory(res.data.data)
    })
  }, [count, limitNum])
  const onChange = (page: number, pageSize: number) => {
    setCount(page)
    setLimitNum(pageSize)
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      render: (text: any, record: DataType, index: number) => {
        return (
          <span>{(count - 1) * 10 + (index + 1)}</span>
        )
      }
    },
    {
      title: '商品姓名',
      dataIndex: 'proname',
      align: 'center',
      render: (text: string,record) => {
        return (
          <div style={{ color: 'pink' }} className='prolist-desc  '>{text}</div>
        )
      }
    },
    {
      title: '商品图片',
      dataIndex: 'img1',
      align: 'center',
      render: (text: string) => {
        return (
          <Image src={text} style={{ width: 50, height: 50, margin: '0 auto', display: 'block' }}></Image>
        )
      }
    },
    {
      title: '商品价格',
      dataIndex: 'originprice',
      align: 'center',
      render: (text: string) => {
        return (
          <span style={{ color: 'red' }}>￥{text}</span>
        )
      }
    },
    {
      title: '是否在售',
      dataIndex: 'issale',
      align: 'center',
      render: (text: number) => {
        return (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            {
              text === 1 ? <Tag color="green" style={{}}>在售</Tag> : <Tag color="red">停售</Tag>
            }
          </div>
        )
      }
    },
    {
      title: '是否推荐',
      dataIndex: 'isrecommend',
      align: 'center',
      render: (text: number) => {
        return (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            {
              text === 1 ? <Tag color="green" style={{}}>推荐</Tag> : <Tag color="red">不推荐</Tag>
            }
          </div>
        )
      }
    },
    {
      title: '是否秒杀',
      dataIndex: 'isseckill',
      align: 'center',
      render: (text: number) => {
        return (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            {
              text === 1 ? <Tag color="green" style={{}}>秒杀</Tag> : <Tag color="red">不秒杀</Tag>
            }
          </div>
        )
      }
    },
    {
      title: '商品描述',
      dataIndex: 'desc',
      align: 'center',
      render: (text: string) => {
        return (
          <div className='prolist-desc'>
            {
              text
            }
          </div>
        )
      }

    },
    {
      title: '库存',
      dataIndex: 'stock',
      align: 'center',
      render: (text: string) => {
        return (
          <div style={{ color: 'green' }}>{text}件</div>
        )
      }
    },
    {
      title: '操作',
      align: 'center',
      render: (text: DataType, record: DataType, index: number) => {
        return (
          <Space>
            <Button type='dashed' onClick={() => { }}>编辑</Button>
            <Popconfirm
              title="删除数据"
              description="你确定要删除这条数据吗?"
              onConfirm={() => { }}
              okText="确定"
              cancelText="取消"
            >
              <Button danger>删除</Button>
            </Popconfirm>
          </Space>
        )
      }
    }
  ]
  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <Space style={{ width: '100%' }}>
        <Select style={{ width: '120px' }} value={cateSelect} onChange={(value) => {
          console.log(value);
          setCateSelect(value)
          getProSearchHandler({ category: value }).then(res => {
            setData(res.data.data)
            setTotal(res.data.total)
          })
        }}>
          <Select.Option value='' >全部</Select.Option>
          {
            Category.map((item, index) => {
              return (
                <Select.Option value={item} key={index}>
                  {item}
                </Select.Option>
              )
            })
          }
        </Select>
        <Input placeholder='请输入关键字' value={Search} onChange={(e) => {
             setSearch(e.target.value)
             getProSearchHandler({ search: e.target.value, category:cateSelect}).then(res => {
              setData(res.data.data)
              setTotal(res.data.total)
            })
        }}></Input>
        <Button type='primary' onClick={()=>{
          getProSearchHandler({ search: Search, category:cateSelect}).then(res => {
            setData(res.data.data)
            setTotal(res.data.total)
          })
        }}>搜索</Button>
      </Space>
      <Table
        columns={columns}
        dataSource={data}
        scroll={{ y: height - 330, x: 2000 }}
        rowKey='proid'
        
        pagination={
          {
            total: total,
            showTotal: (total) => `共 ${total} 条数据`,
            showQuickJumper: true,
            showSizeChanger: true,
            onChange,
            pageSizeOptions: [5, 10, 20, 50]
          }
        }
      />;
    </Space>
  );
}

export default ProSearch;
